<template>
    <div>
        <Nav/>
        <div class="header">
            <div class="container">
                <form class="main-form">
                    <h1>用户注册</h1>
                    <mu-alert color="error" >
                            this is error alert
                    </mu-alert>
                    <div>
                        <input type="text" placeholder="用户名">
                    </div>
                    <div>
                        <input type="text" placeholder="手机号码">
                    </div>
                    <div>
                        <input type="password" placeholder="密码">
                    </div>
                    <div>
                        <input type="password" placeholder="确认密码">
                    </div>
                    <div>                        
                        <mu-button round color="deepOrange500" type="submit">立即注册</mu-button>                   
                    </div>
                    
                </form>
            </div>
        </div>

        <Footer/>
    </div>
</template>

<script>
import Nav from '../components/Nav.vue'
import Footer from '../components/Footer'

export default {
    components:{
        Nav,
        Footer
    }
}
</script>

<style scoped>
    .header{
        background-color: #fd5400;
        height: 475px;
    }
    .container{
        height: 475px;
        position: relative;
    }
    form{
        background-color: white;
        padding: 20px;
        right: 35%;
        position: absolute;
    }

    input,button{
        width: 300px;
        padding: 10px;
        margin: 10px;
    }

    h1{
        font-size: 1.3rem;
        text-align: center;
        font-weight: normal;
    }

  

</style>
